<template>
    <fieldset>
        <legend>{{ $store.state.product.name}}</legend>
        <!-- <button @click="getProduct">点击获取购物车数据</button> -->
        <!-- {{
            $store.state.product.products
        }} -->
        <ul>
            <li v-for="item in products" :key="item.id">
                <b>产品名称：{{item.title}}</b>
                |
                <b>价格：{{item.price}}</b>
                |
                <b>库存：{{item.inventory}}</b>
                -------
                <button @click="add(item)"  :disabled="item.inventory === 0">点击加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template> 


<script>
// 需求：
// 1.点击购物车获取数据
 
// 2.点击加入购物车，将数据添加到cart模块中

//使用辅助函数的映射，把数据传输过来
import {mapActions,mapState} from "vuex"
export default{
    computed:{
        ...mapState('product',['products'])
    },
    mounted(){
        //触发actions
        this.FETCH_PRODUCT()
    },
    methods:{
        add(item){
            this.ADD_TO_CART(item)
        },
        ...mapActions('product',['FETCH_PRODUCT']),
        ...mapActions('cart',['ADD_TO_CART'])
        // getProduct(){
        //     fetch('http://chst.vip/data/index.json')
        //     .then(body =>body.json())
        //     .then(res =>{
        //         console.log(res)
        //         this.$store.state.product.products = res.data
        //     })
        // }
    }
}
</script>